<template>
  <div class="hello">
    <el-amap ref="map" map-style="amap://styles/62009be025f187dd3eafe327d2e55b8e" :zoom="zoom" view-mode="3D" @init="initMap" @click="clickMap" class="amap-demo">
    </el-amap>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      zoom: 4,

    };
  },
  methods: {
    getMap() {
      console.log(this.$refs.map.$$getInstance());
    },
    clickMap(e){
      console.log('click map :', e );
    },
    initMap(e){
      console.log('init map: ', e);
      let that = this
      //加载相关组件
      AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function(DistrictCluster, $) {

        window.DistrictCluster = DistrictCluster;

        //启动页面
        that.initPage(DistrictCluster, $,e);
      });
    },
     initPage(DistrictCluster, $, map) {

  var distCluster = new DistrictCluster({
    map: map, //所属的地图实例
    zIndex:11,
    getPosition: function(item) {

      if (!item) {
        return null;
      }

      var parts = item.split(',');

      //返回经纬度
      return [parseFloat(parts[0]), parseFloat(parts[1])];
    }
  });

  window.distCluster = distCluster;

  $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
  $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {

    $('#loadingTip').remove();

    var data = csv.split('\n');

    distCluster.setData(data);
  });
}


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width: 100%;
 height: 800px;
}
</style>
